<template>
  <div class="app-container  bg-gray">
    <el-row class="box-1">
      <el-col :span="24">
        <el-card>
          <el-row :gutter="20" class="model">
            <el-col :xs="8" :sm="8" :md="7" :lg="6" :xl="4">
              <el-card shadow="hover">
                <span>提现总额（提现中+审核通过）</span>
                <div><span>￥ </span> {{ withdrawTotalMoney }}</div>
              </el-card>
            </el-col>
            <el-col :xs="8" :sm="8" :md="7" :lg="6" :xl="4">
              <el-card shadow="hover">
                <span>提现通过总额</span>
                <div><span>￥ </span> {{ withdrawMoney }}</div>
              </el-card>
            </el-col>
            <el-col :xs="8" :sm="8" :md="7" :lg="6" :xl="4">
              <el-card shadow="hover">
                <span>提现中总额</span>
                <div><span>￥ </span> {{ withdrawingMoney }}</div>
              </el-card>
            </el-col>
          </el-row>
          <div class="header">
            <div>
              <!-- <el-select v-model="searchTerms.type" class="select" placeholder="奖金 | 余额" clearable @change="getData">
                <el-option value="1" label="余额"/>
                <el-option value="2" label="奖金"/>
              </el-select>-->
              <el-input v-model="searchTerms.searchValue" placeholder="请输入提现人名称" class="search-input" @change="getData" />
              <el-button type="success" class="do-btn" icon="el-icon-search" @click="getData">搜索</el-button>
            </div>
          </div>
          <el-table v-loading="tableLoading" :data="tableData" :max-height="tableMaxHeight" border highlight-current-row @sort-change="handleSortChange">
            <el-table-column prop="id" label="ID" min-width="65" header-align="center" align="center" sortable />
            <el-table-column prop="admin_name" label="提现人名称" min-width="120" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row['admin_name'] }}<label v-if="!scope.row['job_status']" style="color:red;">（离职）</label>
                <label v-else>（在职）</label>
              </template>
            </el-table-column>
            <el-table-column prop="bonus_money" label="提现金额" min-width="120" header-align="center" align="center" />
            <el-table-column label="类型" min-width="90" header-align="center" align="center" >
              <template slot-scope="scope">
                {{ scope.row.type===1?'余额':'奖金' }}
              </template>
            </el-table-column>
            <el-table-column prop="order_number" label="提现订单号" min-width="150" header-align="center" align="center" />
            <el-table-column prop="pay_number" label="支付订单号" min-width="180" header-align="center" align="center" >
              <template slot-scope="scope">
                {{ !scope.row.pay_number?'--':scope.row.pay_number }}
              </template>
            </el-table-column>
            <el-table-column prop="created_at" label="申请时间" min-width="160" header-align="center" align="center" sortable/>
            <el-table-column prop="remarks" label="提现备注" min-width="120" header-align="center" align="center" />
            <el-table-column label="处理人" min-width="90" header-align="center" align="center" >
              <template slot-scope="scope">
                {{ !scope.row.handle_name?'--':scope.row.handle_name }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="处理状态" min-width="110" header-align="center" align="center" sortable>
              <template slot-scope="scope">
                {{ scope.row.status==0?'审核中':scope.row.status==1?'审核通过':scope.row.status==2?'申请失败':'已取消' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="160" header-align="center" align="center" fixed="right">
              <template slot-scope="scope">
                <div v-if="scope.row.status==0">
                  <el-button type="success" size="small" icon="el-icon-check" circle class="bg-green" @click="setStatus(scope.row, true)"/>
                  <el-button type="danger" size="small" icon="el-icon-close" circle @click="setStatus(scope.row, false)"/>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :total="total"
            class="pagination"
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { handleCurrentChange, handleSizeChange, handleSortChange, columnCheck } from '../../utils/table'

export default {
  data() {
    return {
      searchTerms: {
        searchValue: '',
        type: 1
      },

      // 表格相关数据
      tableMaxHeight: document.documentElement.clientHeight - 280,

      withdrawMoney: '',
      withdrawTotalMoney: '',
      withdrawingMoney: '',

      // 表格相关参数
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0,
      tableData: [],
      th: [{ name: '客户名称', check: true },
        { name: '客户手机', check: true },
        { name: '订单号', check: true },
        { name: '操作人', check: true },
        { name: '商品名称', check: true },
        { name: '商品金额', check: true },
        { name: '提成', check: true },
        { name: '当时总提成', check: true },
        { name: '类型', check: true },
        { name: '记录时间', check: true }]
    }
  },
  watch: {

  },
  created() {
    this.getData()
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, columnCheck,
    getData(order) {
      this.tableLoading = true
      order || (order = {})
      const url = 'finance/withdrawals'
      const data = {
        page_no: this.currentPage,
        page_size: this.pageSize,
        search: this.searchTerms.searchValue,
        type: this.searchTerms.type
      }
      order.sortName && (data.sortName = order.sortName)
      order.sortOrder && (data.sortOrder = order.sortOrder)
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.withdrawMoney = res.data.withdrawMoney
        this.withdrawTotalMoney = res.data.withdrawTotalMoney
        this.withdrawingMoney = res.data.withdrawingMoney
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    setStatus(row, status) {
      this.$confirm('此操作将' + (status ? '同意' : '拒绝') + '该提现申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const url = 'finance/ajax/' + row.id
        const data = {
          action: 'withdrawal',
          check_res: status ? 'pass' : 'refuse'
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg)
          this.getData()
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.box-1 {
  .model {
    display: flex;
    align-items: flex-end;
    margin-bottom: 15px;
    .el-card {
      color: #fff;
      background-color: $panGreen;
      span {
        font-size: 14px;
      }
      div {
        font-size: 24px;
        margin-top: 10px;
      }
    }
  }
  .header {
    @include flex-row(center, space-between);
    padding-bottom: 15px;
    div {
      @include flex-row(center, flex-start);
      flex-wrap: wrap;
    }
    .el-select{
      width: 140px;
      margin-right: 10px;
    }
    .search-input {
      width: 240px;
    }
    .do-btn {
      @extend .bg-green;
      margin-left: 6px;
    }
  }
}
</style>
